<style lang="scss" scoped>
    .list{
        width: 300px;
        height: 70px;
        display: flex;
        justify-content: space-between;
        .item,
        .itemActived,
        .itemActive{
            width: 50px;
            height:70px;
            display: flex;
            flex-direction: column;
            justify-content:center;
            align-items: center;
            position: relative;
            &:not(:nth-child(1)){
                &::after{
                    background-color: #999;
                    width: 66px;
                    height: 2px;
                    content: '';
                    position: absolute;
                    right: 34px;
                    top: 45px;
                }
            }

            i{
                display: inline-block;
                width: 15px;
                height: 15px;
                background-color: #999;
                border-radius: 50%;
            }
        }
        .itemActived{
            &::after{
                background-color: aqua !important;
            }
            i{
                background-color: aqua;
            }
        }
        .itemActive{
            color: aqua;
            &::after{
                background-color: aqua !important;
            }
            i{
                background-color: aqua;
            }
        }
    }
</style>
<template>
    <div class="steps">
        <div class="list">
            <div :class="{
                itemActived:index>0,
                item:index < 0,
                itemActive: index === 0
            }">
                <span>
                    第一步
                </span>
                <i></i>
            </div>
            <div :class="{
                itemActived:index>1,
                item:index < 1,
                itemActive: index === 1
            }">
                <span>
                    第二步
                </span>
                <i></i>
            </div>
            <div :class="{
                itemActived:index>2,
                item:index < 2,
                itemActive: index === 2
            }">
                <span>
                    第三步
                </span>
                <i></i>
            </div>
            <div :class="{
                itemActived:index>3,
                item:index < 3,
                itemActive: index === 3
            }">
                <span>
                    第四步
                </span>
                <i></i>
            </div>
        </div>
        <button @click="$emit('change')">
            下一步
        </button>
    </div>
</template>
<script>
    export default {
        props: {
            index: {
                type: [String,Number],
                default: -1
            }
        }
    }
</script>